<template>
  <div class="home_box">
    <div class="bannerBox">
      <el-carousel :interval="4000" type="card" height="245px">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <img class="home_img" :src="item.imgUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="home_footer">
      <div class="home_card">
        <div class="card_item" v-for="(k,i) in cardList" :key="i" @click="handleClickCard(k)">
          <div class="card_title">{{ k.name }}({{ k.total }})</div>
          <div class="card_content">{{ k.content }}</div>
        </div>
      </div>
      <div class="home_right" id="main"></div>
    </div>
  </div>
</template>
<script>
import $http from '@/http/api';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      bannerList: [],
      cardList: []
    }
  },
  mounted() {
    this.fetchHomeInfo();
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    this.drawing(myChart);
    window.addEventListener('resize', myChart.resize);
  },
  methods: {
    async fetchHomeInfo () {
      const res = await $http.bannerList();
      this.bannerList = res.data[0].list;
      this.cardList = res.data;
    },
    drawing(myChart) {
      var option = {
        legend: {
          show: true,
          orient: 'vertical',
          left: "left"
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '图表',
            type: 'pie',
            radius: "95%",
            center: ['36%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: '菜单管理' },
              { value: 38, name: '角色管理' },
              { value: 32, name: '用户管理' },
              { value: 30, name: '首页设置' },
              { value: 28, name: '接口监听' },
              { value: 26, name: '动态拖移' },
              { value: 22, name: '图片设置' },
              { value: 18, name: '其他' }
            ]
          }
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
        myChart.resize();
      }
    },
    handleClickCard(k) {
      this.bannerList = k.list;
    }
  }
}
</script>
<style scoped lang="less">
.home_footer {
  display: flex;
  .home_right {
    flex: 1;
    width: 830px;
    height: 365px;
    overflow: hidden;
  }
  .home_card {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    flex-direction: column;
    .card_item {
      display: flex;
      height: 100px;
      cursor: pointer;
      // background: #f90;
      border: 1px solid #ddd;
      width: 400px;
      box-shadow: 5px 5px #ddd;
      margin-bottom: 20px;
      .card_title {
        // background: #03ccdd;
        font-size: 14px;
        line-height: 100px;
        text-align: center;
        width: 138px;
        border-right: 1px solid #ddd;
      }
      .card_content {
        padding: 5px 10px;
        line-height: 25px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.home_box {
  background: #fff;
  .bannerBox {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }
  // height: calc(100vh - 105px);
}

.home_img {
  width: 100%;
  height: 245px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>